<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Astronauts sign up & login Form a Flat Responsive Widget Template :: xmoban.cn </title>
    <!-- Meta tags -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content=" Astronauts sign up & login Form Responsive Widget, Audio and Video players, Login Form Web Template, Flat Pricing Tables, Flat Drop-Downs, Sign-Up Web Templates, Flat Web Templates, Login Sign-up Responsive Web Template, Smartphone Compatible Web Template, Free Web Designs for Nokia, Samsung, LG, Sony Ericsson, Motorola Web Design"
    />
    <script>
        addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }
    </script>
    <!-- Meta tags -->
    <!--pop-ups-->
    <link th:href="@{~/css/popuo-box.css}" rel="stylesheet" type="text/css" media="all" />
    <!-- //pop-ups-->
    <!--stylesheets-->
    <link th:href="@{~/css/style.css}" rel='stylesheet' type='text/css' media="all">
    <!--//style sheet end here-->
    <link href="//fonts.googleapis.com/css?family=Barlow:300,400,500" rel="stylesheet">
</head>
<body>
<h1 class="header-w3ls">
    登录 或者~ 注册
</h1>
<div class="art-bothside">
    <div class="mid-cls">
        <div class="art-right-w3ls">
            <h2>Astronauts sign up and login</h2>
            <p>consectetur adipiscing elit, sed do eiusmod tempor incididunt Lorem ipsum dolor sit amet</p>
            <form id="myForm" th:action="reg" method="post">
                <div class="main">
                    <div class="form-left-to-w3l">
                        <input type="text" name="username" placeholder="用户名" required="">
                    </div>
                    <div class="form-right-w3ls">
                        <input type="email" name="email" placeholder="注册邮箱~ ~ " required="">
                    </div>
                </div>
                <div class="main">
                    <div class="form-left-to-w3l">
                        <input type="password" name="password" placeholder="Password" id="password" required="">
                        <div class="clear"></div>
                    </div>
                    <div class="form-right-w3ls ">
                        <input type="password" placeholder="Confirm Password" id="confirm_password" required="">
                    </div>
                </div>
                <div class="btnn">
                    <button th:id="submit" type="submit">注册</button>
                    <span class="btn-block" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}" style="color: red"></span>
                </div>

            </form>
            <div class="banner-agileits-btm">
                <div class="w3layouts_more-buttn">
                    <h3>Already have an account..? <a href="#small-dialog1 " class="play-icon popup-with-zoom-anim">login</a></h3>
                </div>
                <div id="small-dialog1" class="mfp-hide w3ls_small_dialog wthree_pop">
                    <div class="agileits_modal_body">
                        <!--login form-->
                        <div class="letter-w3ls">
                            <form id="TowForm"  action="login" method="post">
                                <div class="form-left-to-w3l">
                                    <input type="text" name="username" placeholder="Name" required="">
                                </div>
                                <div class="form-right-w3ls">
                                    <input type="email" name="email" placeholder="Email" required="">
                                </div>
                                <div class="form-right-w3ls ">
                                    <input type="password" name="password" placeholder="Password" required="">
                                </div>
                                <div class="btnn">
                                    <button th:id="login" type="submit">登录</button><br>
                                </div>
                            </form>
                            <div class="clear"></div>
                        </div>
                        <!--//login form-->
                    </div>
                </div>
            </div>
        </div>
        <div class="art-left-w3ls">
            <img th:src="@{~/images/right1.jpg}" class="img-fluid" alt="">
        </div>
    </div>
</div>
<div class="copy">
    <p>&copy;2020 Astronauts sign up & login Form. All Rights Reserved | Design by
</div>
<!--js working-->
<script th:src='@{~/js/jquery-2.2.3.min.js}'></script>
<!--//js working-->
<script>
    var password = document.getElementById("password")
        , confirm_password = document.getElementById("confirm_password");

    function validatePassword(){
        if(password.value != confirm_password.value) {
            confirm_password.setCustomValidity("Passwords Don't Match");
        } else {
            confirm_password.setCustomValidity('');
        }
    }
    password.onchange = validatePassword;
    confirm_password.onkeyup = validatePassword;
</script>
<!--//scripts-->
<script th:src="@{~/js/jquery.magnific-popup.js}"></script>
<!-- //pop-up-box -->
<script>
    $(document).ready(function () {
        $('.popup-with-zoom-anim').magnificPopup({
            type: 'inline',
            fixedContentPos: false,
            fixedBgPos: true,
            overflowY: 'auto',
            closeBtnInside: true,
            preloader: false,
            midClick: true,
            removalDelay: 300,
            mainClass: 'my-mfp-zoom-in'
        });

    });
</script>
<script>
    $("#submit").click(function () {
        $("#myForm").submit();
    });
    $("#login").click(function () {
        $("#TowForm").submit();
    })
</script>
</body>
</html>
